﻿
@{
    ViewData["Title"] = "AngularJSDemo";
    Layout = "~/Views/Shared/_FormGray.cshtml";
}


<!DOCTYPE html>
<html ng-app="myNoteApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS 示例</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div class="row wrapper wrapper-content animated fadeInRight">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title" style="background-color:lightblue;border-radius:4px">
                    <h5><i class="fa fa-file-code-o"></i> AngularJS输入表单示例</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div ng-controller="myTest" class="ibox-content" style="height:350px;font-size:14px;border-radius:4px;box-shadow: 6px 6px 3px #888888">
                    <p>名称 : <input type="text" ng-model="name"></p>
                    <p>日期 : <input type="date" ng-model="cDate"></p>
                    <p>数量 : <input type="number" ng-model="cNumber"></p>
                    <p>选择 : <input type="checkbox" ng-model="cCheckbox"></p>
                    <p>单选 : <input type="radio" ng-model="cRadio"></p>
                    <p>你好 {{name}} 你输入的日期是：{{cDate}}</p>
                    <p ng-bind="name"></p>
                    <p>
                        <button ng-click="save()" class="btn btn-primary btn-sm fa fa-save">保存</button>
                        <button ng-click="clear()" class="btn btn-primary btn-sm fa fa-cut">清除</button>
                        <button ng-click="clear()" class="btn btn-danger  btn-sm fa fa-times">关闭</button>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title" style="background-color:steelblue;color:white;border-radius:4px;">
                    <h5><i class="fa fa-file-code-o"></i> AngularJS 笔记本</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link"> <i class="fa fa-chevron-up"></i></a>
                        <a class="close-link"><i class="fa fa-times-circle"></i> </a>
                    </div>
                </div>
                <div class="ibox-content" style="height: 350px; font-size: 14px; color: black; border-radius: 4px; box-shadow: 6px 6px 3px #888888">
                    <div ng-controller="myNoteCtrl">
                        <h5>我的笔记</h5>
                        <p><textarea ng-model="message" cols="60" rows="8"></textarea></p>
                        <p>
                            <button ng-click="save()" class="btn btn-primary btn-sm">保存</button>
                            <button ng-click="clear()" class="btn btn-primary btn-sm">清除</button>
                        </p>
                        <p>Number of characters left: <span ng-bind="left()"></span></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title" style="background-color:steelblue;color:white;border-radius:4px;">
                    <h5><i class="fa fa-file-code-o"></i> Bootstrap按钮示例</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link"> <i class="fa fa-chevron-up"></i></a>
                        <a class="close-link"><i class="fa fa-times-circle"></i> </a>
                    </div>
                </div>
                <div class="ibox-content" style="font-size:14px; color:black;border-radius:4px;box-shadow: 4px 4px 2px #888888">
                    <p>
                        任何按钮都可以在左侧或右侧添加图标
                    </p>

                    <h3 class="font-bold">图标按钮</h3>
                    <p>
                        <button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;提交</button>
                        <button class="btn btn-success " type="button">
                            <i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传</span>
                        </button>
                        <button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
                        <button class="btn btn-warning " type="button">
                            <i class="fa fa-warning"></i> <span class="bold">警告</span>
                        </button>
                        <button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;百度地图</button>

                        <a class="btn btn-success">
                            <i class="fa fa-weixin"> </i> 分享到微信
                        </a>
                        <a class="btn btn-success btn-outline">
                            <i class="fa fa-qq"> </i> 使用QQ账号登录
                        </a>
                        <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-user-md"></i>
                        </a>
                        <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-group"></i>
                        </a>
                        <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-exchange"></i>
                        </a>
                        <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-check-circle-o"></i>
                        </a>
                        <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-road"></i>
                        </a>
                        <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-ambulance"></i>
                        </a>
                        <a class="btn btn-white btn-bitbucket">
                            <i class="fa fa-star"></i> 收藏
                        </a>
                    </p>

                    <h3 class="font-bold">按钮切换</h3>
                    <button data-toggle="button" class="btn btn-primary btn-outline" type="button">按钮1</button>
                    <button data-toggle="button" class="btn btn-primary" type="button">按钮2</button>
                    <div data-toggle="buttons-checkbox" class="btn-group">
                        <button class="btn btn-primary active" type="button"><i class="fa fa-bold"></i> 粗体</button>
                        <button class="btn btn-primary" type="button"><i class="fa fa-underline"></i> 下划线</button>
                        <button class="btn btn-primary active" type="button"><i class="fa fa-italic"></i> 斜体</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var app = angular.module("myNoteApp", []);
            app.controller("myNoteCtrl", function ($scope) {
                $scope.message = "";
                $scope.left = function () { return 100 - $scope.message.length; };
                $scope.clear = function () { $scope.message = ""; };
                $scope.save = function () { alert("Note Saved"); };
            });
            app.controller("myTest", function ($scope) {
                $scope.name = "Kingmo";
                $scope.cNumber = 200;
                $scope.cDate = Date();
                $scope.clear = function () {
                    $scope.name = "";
                    $scope.cDate = "";
                    $scope.cNumber = 0;
                    $scope.cCheckbox = false;
                };
                $scope.save = function () { alert("数据已经保存"); };
            });
        </script>
    </div>
</body>

</html>
